<!--
 * @Descripttion:
 * @Author: peter.pan
 * @Date: 2022-12-12 11:35:20
 * @LastEditors: peter.pan
 * @LastEditTime: 2022-12-12 12:03:27
-->
<template>
  <el-dialog title="编辑服务" :visible.sync="dialogFormVisible">
    <el-form
      ref="dataForm"
      :rules="{}"
      :model="temp"
      label-position="left"
      label-width="70px"
      size="small"
      style="width: 400px; margin-left: 50px"
    >
      <!-- <el-form-item label="Type" prop="type">
          <el-select v-model="temp.type" class="filter-item" placeholder="Please select">
            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
          </el-select>
        </el-form-item> -->
      <el-form-item label="服务名称" prop="name">
        <el-input v-model="temp.name" :disabled="true" />
      </el-form-item>
      <el-form-item label="服务简介" prop="description">
        <el-input v-model="temp.description" />
      </el-form-item>
      <el-form-item label="所属部门" prop="dept">
        <el-input v-model="temp.dept" />
      </el-form-item>
      <el-form-item label="开发人员" prop="developer">
        <el-input v-model="temp.developer" />
      </el-form-item>
      <el-form-item label="产品经理" prop="productManager">
        <el-input v-model="temp.productManager" />
      </el-form-item>
      <el-form-item label="测试人员" prop="tester">
        <el-input v-model="temp.tester" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogFormVisible = false"> 取消 </el-button>
      <el-button
        type="primary"
        size="small"
        @click="dialogStatus === 'create' ? createData() : updateData()"
      >
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateApp } from '@/api/app'

export default {
  data() {
    return {
      dialogFormVisible: false,
      temp: {
        id: undefined,
        description: '',
        developer: '',
        productManager: '',
        tester: '',
        dept: ''
      },
      dialogStatus: ''
    }
  },
  methods: {
    openEdit(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          console.log(tempData)
          updateApp(tempData).then(() => {
            // const index = this.list.findIndex((v) => v.id === this.temp.id)
            // this.list.splice(index, 1, this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
            this.$emit('updateSuccess')
          })
        }
      })
    }
  }
}
</script>
